<template>
    <view class="content-swiper">
        <van-swipe style="height: 100%;" vertical :show-indicators="false" @change="swipeChange">
            <van-swipe-item class="outer-layer-box" v-for="item in state.listData" :key="item.ID">
                <SwiperItem :imgList="item.Files" />
            </van-swipe-item>
        </van-swipe>
        <template v-if="state.curItem.UserInfo">
            <view class="content-swiper-head">
                <view class="content-swiper-head-left">
                    <uni-icons type="back" color="#fff" size="30" @click="goBack()"></uni-icons><text>{{
                        state.curItem.UserInfo.ShowName }}</text>
                    <Ident :userInfo="state.curItem.UserInfo" />
                </view>
                <view class="content-swiper-head-right">
                    <Attention v-if="state.curItem.userInfo && !state.curItem.userInfo.IsFollow"
                        @update:isFollow="ev => state.curItem.userInfo.IsFollow = ev" />
                    <uni-icons type="more-filled" color="#fff" size="30" @click="squareFn()"></uni-icons>
                </view>
            </view>
            <view class="content-swiper-bottom">
                <view class="content-swiper-bottom-title">
                    {{ state.curItem.Text }}
                </view>
                <view class="content-swiper-bottom-label" v-if="state.curItem.Topics && state.curItem.Topics.length">
                    <img src="@/assets/image/icon14.png" alt="">
                    <TopicLabel :Topics="state.curItem.Topics" />
                </view>
                <view class="content-swiper-bottom-date">
                    {{ state.curItem.AddTime }}
                </view>
                <view class="content-swiper-bottom-message">
                    <Review ref="reviewDef" :curUserInfo="state.curItem.UserInfo" />
                    <ReviewGift :userImId="state.curItem.UserInfo.IMId" @successActionGift="successActionGift"/>
                </view>
            </view>
            <view class="content-swiper-right">
                <view class="right-socialize-item" @click="praiseFn()">
                    <img src="@/assets/image/icon77.png" v-if="state.curItem.IsLike">
                    <img src="@/assets/image/icon16.png" v-else>
                    <view class="right-socialize-item-text" >{{state.curItem.LikeCount ? state.curItem.LikeCount :"点赞"}}</view>
                </view>
                <view class="right-socialize-item" @click="commentFn()">
                    <img src="@/assets/image/icon78.png">
                    <view class="right-socialize-item-text">评论</view>
                </view>
                <view class="right-socialize-item" @click="privateChatFn()">
                    <img src="@/assets/image/icon79.png">
                    <view class="right-socialize-item-text">私聊</view>
                </view>
            </view>
        </template>
        <ActionSheetBox :actionsArr="state.actions" :currentItem="state.curItem" ref="ActionSheetRef" />
    </view>
</template>
    
<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import SwiperItem from "@/components/swiperItem/index.vue"
import Review from "@/pages/home/components/review/index.vue"
import ReviewGift from "@/pages/home/components/reviewGift/index.vue"
import TopicLabel from "@/pages/home/components/topicLabel/index.vue"
import Attention from '@/components/attention/index.vue'
import { onLoad } from '@dcloudio/uni-app'

import {
    TrendOneComments, // 获取某一条动态
} from "@/api/list/index"

let { proxy } = getCurrentInstance()

const state = reactive({
    show: false,
    actions: [
        { name: '删除' },
        { name: '仅自己可见' },
    ],
    listData: [],
    PageIndex: 1,
    PageSize: 20,
    nowID: null,
    curItem: {
        UserInfo:{}
    },
    curIndex:0,
})

onLoad((options) => {
    state.nowID = options.id
    TrendOneCommentsFn(options.id)
    TrendListCommentsFn()
    if (!options.isPerson) {
        state.actions = [
            { name: '不喜欢' },
            { name: '举报' },
        ]
    }
})

const goBack = () => {
    uni.navigateBack(-1)
}

const swipeChange = (index) => {
    state.curIndex = index
    state.curItem = state.listData[index]
    if (index == state.listData.length - 10) {
        state.PageIndex++
        TrendListCommentsFn
        TrendListCommentsFn()
    }
}

const successActionGift = () => {

}

// 点赞
import {
    likeTo
} from "@/api/list/index.js"

const praiseFn = () => {
    likeToFn(state.curItem.UserInfo.ID)
}

const likeToFn = async (id) => {
    let params = {
        userId: getAuthorization("userId"),
        likeType: 0
    }
    try {
        let data = {}
        if(state.curItem.IsLike){
            data = await proxy.$post(likeTo(id, params))
        }else{
            data = await proxy.$del(likeTo(id, params))
        }
        let msg = state.curItem.IsLike ? '点赞成功' : '取消成功'
        if (data.code == 200) {
            state.curItem.IsLike = !state.curItem.IsLike
            uni.showToast({
                title: msg,
                icon: "none"
            })
            if(!state.curItem.IsLike){
                state.curItem.LikeCount++
            }else{
                state.curItem.LikeCount--
            }
            state.listData[state.curIndex] = state.curItem
        }
    } catch (error) {
        uni.showToast({
            title: error.message,
            icon: "none"
        })
    }

}


let ActionSheetRef = ref()
const squareFn = () => {
    ActionSheetRef.value.actionSheetShow()
}

let reviewDef = ref(null)

const commentFn = () => {
    reviewDef.value.reviewFn()
}

const TrendOneCommentsFn = async (id) => {
    uni.showLoading({ title: '加载中' })
    let data = await proxy.$get(TrendOneComments + id)
    uni.hideLoading()
    if (data.code == 200) {
        state.curItem = data.data
    }
}

// nowID=252914&PageIndex=1&PageSize=20
const TrendListCommentsFn = async () => {
    let params = {
        nowID: state.nowID,
        PageIndex: state.PageIndex,
        PageSize: state.PageSize,
    }
    // uni.showLoading({ title: '加载中' })
    let data = await proxy.$get(TrendOneComments, params)
    // uni.hideLoading()
    if (data.code == 200) {
        state.listData = state.listData.concat(data.data)
    }
}

// 不喜欢
const privateChatFn = () => {
    uni.navigateTo({
        url: '/pages/privateChat/index'
    })
}

</script>
    
<style lang="scss" scoped>
.content-swiper {
    position: fixed;
    height:100%;
    width: 100vw;
    background-color: #000;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.outer-layer-box {
    display: flex;
    align-items: center;
}

.content-swiper-head {
    position: absolute;
    top: 30rpx;
    width: calc(100vw - 60rpx);
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    padding: 0 30rpx;

    .content-swiper-head-left {
        display: flex;
        align-items: center;
    }



    .content-swiper-head-right {
        display: flex;
        align-items: center;

        .view-item-image-head-attention-cur {
            background: #fff;
            color: #fff;
        }
    }
}

.content-swiper-bottom {
    position: absolute;
    bottom: 60rpx;
    padding: 30rpx;

    img {
        width: 32rpx;
    }

    .content-swiper-bottom-title {
        font-size: 32rpx;
        color: #fff;
        margin-bottom: 20rpx;
    }

    .content-swiper-bottom-label {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        img {
            flex: none;
            width: 32rpx;
            height: 32rpx;
        }
    }



    .content-swiper-bottom-date {
        font-size: 24rpx;
        color: #fff;
        margin-top: 20rpx;
    }

    .content-swiper-bottom-message {
        display: flex;
        align-items: center;
        width: calc(100vw - 30rpx);
        margin-top: 20rpx;
    }
}

.content-swiper-right {
    position: absolute;
    width: 76rpx;
    bottom: 360rpx;
    right: 24rpx;

    .right-socialize-item {
        margin-bottom: 24rpx;

        img {
            width: 76rpx;
        }

        .right-socialize-item-text {
            text-align: center;
            font-size: 28rpx;
            color: #fff;
        }
    }
}
</style>
    